document.addEventListener('DOMContentLoaded', () => {
    const boxOne = document.querySelectorAll('.box-one')[0]
    const boxTwo = document.querySelectorAll('.box-two')[0]
    const boxThree = document.querySelectorAll('.box-three')[0]
    const boxFour = document.querySelectorAll('.box-four')[0]
    const boxFive = document.querySelectorAll('.box-five')[0]
    const boxSix = document.querySelectorAll('.box-six')[0]
    const boxSeven = document.querySelectorAll('.box-seven')[0]
    const boxNine = document.querySelectorAll('.box-nine')[0]
    const setBTn = document.getElementById('setBtn')
    const fullscreen = document.getElementById('fullscreen')

    const boxArr = [boxOne, boxTwo, boxThree, boxFour, boxFive, boxSix, boxSeven, boxNine]
    boxArr.forEach(item => {
        let itemBoxStyle = window.getComputedStyle(item)
        let content = item.querySelector('.content')
        let titleItem = item.querySelector('.title-item')
        let charBox = item.querySelector('.chart-box')
        item.addEventListener('dblclick', () => {
            if (content) {
                content.style.border = 'none'
                content.style.margin = '0'
                content.style.height = '100%'
                content.style.width = '100%'
            }
            if (titleItem) {
                titleItem.style.fontSize = '3.5vh'
                titleItem.style.lineHeight = '5vh'
            }
            if (charBox) {
                charBox.style.height = 'calc(100% - 5vh - 10px)'
            }
            item.style.zIndex = '999'
            item.style.backgroundImage = 'url(./img/bg3.jpg)';//设置背景图的的地址
            // item.style.backgroundColor = '#051655;'
            item.style.backgroundRepeat = "no-repeat";//设置背景不平铺
            item.style.backgroundPosition = "0 0";//设置背景图的位置
            item.style.backgroundSize = "100% 100%";//设置背景图像的尺寸
            item.style.width = '100%'
            item.style.height = '100%'
            item.style.left = '0'
            item.style.top = '0'
            item.style.border = 'none';
            item.addEventListener('click', () => {
                if (content) {
                    content.style.border = '1px solid #579'
                    content.style.margin = '5px'
                    content.style.height = 'calc(100% - 10px)'
                    content.style.width = 'calc(100% - 10px)'
                }
                if (titleItem) {
                    titleItem.style.fontSize = '1.3vh'
                    titleItem.style.lineHeight = '1.3vh'
                }
                if (charBox) {
                    charBox.style.height = 'calc(100% - 1.3vh - 10px)'
                }
                item.style = itemBoxStyle
                init()
            })
        })
    })

    let boxStyle = window.localStorage.getItem('boxStyle') === null ? [] : JSON.parse(window.localStorage.getItem('boxStyle'))

    let init = () => {
        boxArr.forEach((item, i) => {
            item.style.left = (boxStyle[i] === null || boxStyle[i] === undefined) ? item.style.left : boxStyle[i].left
            item.style.top = (boxStyle[i] === null || boxStyle[i] === undefined) ? item.style.left : boxStyle[i].top
        })
    }
    init()

    let isFullscreen = false
    let setActive = false

    window.onresize = () => {
        init()
        getText()
    }

    function getText() {
        if (screen.width === window.innerWidth && screen.height === window.innerHeight) {
            isFullscreen = true
            fullscreen.innerText = '退出全屏'
        } else {
            isFullscreen = false
            fullscreen.innerText = '全屏展示'
        }
    }

    function setText() {
        if (!isFullscreen) {
            document.documentElement.requestFullscreen()
            fullscreen.innerText = '退出全屏'
            isFullscreen = true
        } else {
            document.exitFullscreen()
            fullscreen.innerText = '全屏展示'
            isFullscreen = false
        }
    }

    fullscreen.addEventListener('click', () => {
        setText()
    })

    function setBoxPosition() {
        setActive = !setActive
        if (setActive) {
            setBTn.innerText = '保存'
            window.localStorage.clear()
        } else {
            setBTn.innerText = '设置'
        }
        const screenWidth = document.body.clientWidth
        const screenHeight = document.body.clientHeight
        boxArr.forEach(item => {
            item.style.cursor = 'move'
        })
        if (screenWidth >= 992 && setActive)
            boxArr.forEach((item, i) => {
                let itemBoxStyle = window.getComputedStyle(item)
                item.onmousedown = (e) => {
                    item.style.zIndex = '999'
                    const startX = e.clientX
                    const startY = e.clientY
                    let boxLeft = parseFloat(itemBoxStyle.left)
                    let boxTop = parseFloat(itemBoxStyle.top)
                    document.onmousemove = (e) => {
                        const moveX = e.clientX
                        const moveY = e.clientY
                        let moveLenX = moveX - startX
                        let moveLenY = moveY - startY
                        item.style.left = boxLeft + moveLenX + 'px'
                        item.style.top = boxTop + moveLenY + 'px'
                    }
                    document.onmouseup = () => {
                        item.style.zIndex = '1'
                        let left = (parseFloat(itemBoxStyle.left) / screenWidth) * 100 + '%'
                        let top = (parseFloat(itemBoxStyle.top) / screenHeight) * 100 + '%'
                        boxStyle[i] = {}
                        boxStyle[i].left = left
                        boxStyle[i].top = top
                        window.localStorage.setItem('boxStyle', JSON.stringify(boxStyle))
                        document.onmousemove = null
                        document.onmouseup = null
                    }
                    return false
                }
            })
        else boxArr.forEach((item, i) => {
            item.onmousedown = null
            item.style.cursor = 'default'
        })
    }

    setBTn.addEventListener('click', setBoxPosition)
})